<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="/lib/layui/css/layui.css">
  <link rel="stylesheet" href="/css/public.css" />

</head>

<body>
  <div class="layui-card">
    <div class="layui-card-header">文章列表</div>
    <div class="layui-card-body">
      <form class="layui-form">

        <div class="layui-inline">
          <div class="layui-input-inline" style="width: 200px;">
            <select name="city" lay-verify="">
              <option value="">所有分类</option>
            </select>
          </div>
          <div class="layui-input-inline" style="width: 200px;">
            <select name="Nm" lay-verify="">
              <option value="">所有状态</option>
              <option value="已发布">已发布</option>
              <option value="草稿">草稿</option>
            </select>
          </div>

          <div class="layui-inline">
            <div class="layui-input-inline" style="width: 100px;">
              <button class="layui-btn" lay-submit lay-filter="formDemo">筛选</button>
            </div>
          </div>

        </div>
      </form>

      <table class="layui-table">
        <colgroup>
          <col width="40%" />
          <col width="15%" />
          <col width="15%" />
          <col width="15%" />
          <col />
        </colgroup>
        <thead>
          <tr>
            <th>文章标题</th>
            <th>分类</th>
            <th>发表时间</th>
            <th>发表时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
        </tbody>
      </table>


    <!-- 页码 -->
    <div id="page"></div>
    </div>


    <!-- 渲染页面模板 -->
    <script type="text/html" id="tpl-html">
      {{each data val}}
      <tr>
        <td>{{val.title}}</td>
        <td>{{val.cate_name}}</td>
        <td>{{val.pub_date}}</td>
        <td>{{val.state}}</td>
        <td>
          <a  href="/article/edit.html?id={{val.Id}}" class="layui-btn layui-btn layui-btn-xs">编辑</a>
          <button
            id="del"
            name="{{val.Id}}"
            type="button"
            class="layui-btn layui-btn-danger layui-btn layui-btn-xs"
          >
            删除
          </button>
        </td>
      </tr>
      {{/each}}
    </script>
    <!-- 渲染页面模板 -->

    <!-- 下拉框模板 -->
    <script type="text/html" id="tpl-sel">
      {{each data val}}
      <option value="{{val.Id}}">{{val.name}}</option>
      {{/each}}
    </script>
    <!-- 下拉框模板 -->

    <script src="/lib/layui/layui.all.js"></script>
    <script src="/lib/jquery.js"></script>
    <script src="/lib/template-web.js"></script>
    <script src="/js/setAjax.js"></script>
    <script>
      let delid  ;
      let form = layui.form
      let data = {
            pagenum: 1,
            pagesize: 2,
          }
      //渲染页面
      function sethtml() {
        $.ajax({
          url: "/my/article/list",
          data: data,
          success: function (res) {
            let gethtml = template("tpl-html", res)
            $("tbody").html(gethtml)
            renderhtml(res.total)
          }
        })
      }
      sethtml()
      //渲染页面

      // 页码
      var laypage = layui.laypage;

      function renderhtml (a){
        laypage.render({
        elem: 'page', 
        count: a ,
        limit: data.pagesize,
        curr:data.pagenum,
        limits:[2,3,5,10],
        layout:['count','limit','prev', 'page', 'next','skip'],
        jump:function(obj,first){
          if(!first){
            data.pagenum = obj.curr,
            data.pagesize = obj.limit
            sethtml()
          }
        }
      });
      }
      // 页码

      //筛选
      // 动态渲染下拉框
      $.ajax({
        url:"/my/article/cates",
        success:function(res){
          if(res.status === 0){
            let sel = template("tpl-sel",res)
            $("select[name=city]").append(sel)
            form.render()
          }
        }
      })
      // 动态渲染下拉框

      $("table").on("submit",function(e){
        e.preventDefault()
        let dataId = $("select[name=city]").val()
        let dataNm = $("select[name=Nm]").val()
        data.cate_id = dataId
        data.state = dataNm
        data.pagenum = 1
        sethtml()
      })
      //筛选

      //删除按钮
      $("tbody").on("click",$("#del"),function (event) {
        layer.confirm("确定要删除吗",function (index) { 
          let target = $(event.target)
          delid = $(target).attr("name")
          $.ajax({
            url:"/my/article/delete/" + delid,
            success:function(res){
              if(res.status === 0){
              layer.msg(res.message)
              sethtml()
                }
              }
            })
         })
        
      })
      //删除按钮

    </script>
</body>

</html>